<template>
	<!-- 文章组 -->
	<view class="diy-article">
		<view :class="'article-item show-type__' + item.show_type" v-for="(item, index) in dataList" :key="index" @tap="onTargetDetail" :data-id="item.article_id">
			<!-- 小图模式 -->
			<block v-if="item.show_type == 10">
				<view class="article-item__left flex-box">
					<view class="article-item__title twolist-hidden">
						<text class="f-30 col-3">{{ item.article_title }}</text>
					</view>
					<view class="article-item__footer m-top10">
						<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
					</view>
				</view>
				<view class="article-item__image"><image class="image" mode="widthFix" :src="item.image.file_path"></image></view>
			</block>
			<!-- 大图模式 -->
			<block v-if="item.show_type == 20">
				<view class="article-item__title">
					<text class="f-30 col-3">{{ item.article_title }}</text>
				</view>
				<view class="article-item__image m-top20"><image class="image" mode="widthFix" :src="item.image.file_path"></image></view>
				<view class="article-item__footer m-top10">
					<text class="article-views f-24 col-8">{{ item.show_views }}次浏览</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
import Route from '@/utils/Route.js';
export default {
	props: {
		itemIndex: String,
		// itemStyle: Object,
		params: Object,
		dataList: Array
	},
	data() {
		return {};
	},

	methods: {
		onTargetDetail(e) {
			Route.navigateTo({
				url: '/pages/article/detail/index?article_id=' + e.currentTarget.dataset.id
			});
		}
	}
};
</script>

<style>
/* 文章组 */

.diy-article {
	background: #f7f7f7;
}

.diy-article .article-item {
	margin-bottom: 20rpx;
	padding: 30rpx;
	background: #fff;
}

.diy-article .article-item:last-child {
	margin-bottom: 0;
}

.diy-article .article-item .article-item__image .image {
	display: block;
}

/* 小图模式 */

.show-type__10 {
	display: flex;
}

.show-type__10 .article-item__left {
	padding-right: 20rpx;
}

.show-type__10 .article-item__title {
	min-height: 72rpx;
}

.show-type__10 .article-item__image .image {
	width: 240rpx;
}

/* 大图模式 */

.show-type__20 .article-item__image .image {
	width: 100%;
}
</style>
